<template>
    <div class="editForm-wrapper">
        <!-- 产品编辑dialog-->
        <el-dialog
            :title="title"
            :close-on-click-modal="false"
            v-dialogDrag
            :visible.sync="editVisible"
        >
            <el-form
                label-width="93px"
                :rules="dataRule"
                ref="editForm"
                :model="editForm"
            >
                <!-- oninput="value=value.replace(/[^\d]/g,'')" -->
                <el-form-item label="上级目录:">
                    <el-input v-model="categoryName" :disabled="true"></el-input>
                    <!--          {{categoryName}}-->
                </el-form-item>
                <el-form-item label="目录名称:" prop="name">
                    <el-input maxlength="20" show-word-limit v-model.trim="editForm.name" placeholder="请输入产品目录(20字以内)"></el-input>
                </el-form-item>
                <!--        <el-form-item label="是否复磅:" prop="isRepeateMeasure">-->
                <!--        <el-radio-group v-model="editForm.isRepeateMeasure">-->
                <!--            <el-radio label="1">是</el-radio>-->
                <!--            <el-radio label="0">否</el-radio>-->
                <!--        </el-radio-group>-->
                <!--        </el-form-item>-->
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="doSubmit()" v-noMoreClick
        >确定</el-button
        >
        <el-button size="small" @click="close()">取消</el-button>
      </span>
        </el-dialog>
    </div>
</template>
<script>
    import {editTreeData, checkRepeat} from '@/api/market/product.js';

    export default {
        components: {},
        data() {
            return {
                categoryName: '',
                areaLabel: {},
                method: '',
                title: '',
                editForm: {// 添加时使用
                    id: '',
                    name: '',
                    types: '0',
                    isRepeateMeasure: '', // 是否复榜  0不复磅  1复磅
                    parentNum: ''
                },
                // eidtForm: {}, // 修改时使用
                editVisible: false,
                detailsVisible: false,
                dataRule: {
                    name: [{required: true, message: '请输入产品名称', trigger: 'blur'},
                        {validator: this.checkRepeatCategoryName, trigger: 'blur'}],
                    types: [
                        {required: true, message: '请选择产品类型', trigger: 'change'}
                    ]
                }
            }
        },
        methods: {
        	handleClose(done) {
						this.$Msg.confirm({
							title:'您确定要关闭吗？',
							content:this.GLOBAL.FORM_CLOSE_TIPS,
							confirmCall:()=>{
								done();
							}
						})
					},
            // 目录名称重复校验
            checkRepeatCategoryName(rule, value, callback) {
                if (this.method === 'edit') {
                    return callback()
                }
                if (value) {
                    checkRepeat({
                        types: '0',
                        name: value
                    }).then(res => {
                        console.log(res.data)
                        if (res.data.code !== '200') {
                            callback(new Error('目录名称有重复'))
                        } else {
                            callback()
                        }
                    })
                } else {
                    callback()
                }
            },
            init(method, node, data) {
                if (method === 'add') {
                  this.categoryName = data.name
                    this.editVisible = true
                    this.$nextTick(() => {
                        this.$refs.editForm.resetFields()
                        this.editForm.id = ''
                        // this.editForm = {}
                    })

                    this.editForm.parentNum = data.id
                    this.editForm.types = 0
                    this.title = '新增产品目录'
                } else {
                  this.categoryName = node.parent.data.name
                    this.editVisible = true
                    this.$nextTick(() => {
                        this.$refs.editForm.resetFields()
                        this.editForm.id = data.id
                        this.editForm.types = 0
                        this.editForm.parentNum = ''
                        this.editForm.isRepeateMeasure = data.isRepeateMeasure
                        this.editForm.name = data.name
                        // this.recover(this.editForm, data)
                        // this.editForm = {}
                    })

                    this.editForm.parentNum = data.id
                    this.editForm.types = 0
                    this.title = '修改产品目录'
                }
            },
            close() {
                this.editVisible = false
            },
            doSubmit() {
                this.$refs['editForm'].validate((valid) => {
                    if (valid) {
                        editTreeData(this.editForm).then((res) => {
                            if (res.data.code === '200') {
                                this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                })
                                this.editVisible = false
                                this.$emit('refreshDataList')
                            }
                        })
                    }
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    ::v-deep .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 100%;
    }

    .view-container {
        margin-bottom: 20px;
        display: flex;

        .label-container {
            width: 150px;
            text-align: right;
            font-size: 16px;
            font-weight: 400;
            color: #666666;
        }

        .form-container {
            font-size: 14px;
            font-weight: 400;
            color: #333333;
            width: 200px;
        }
    }
</style>
